<template>
  <div>
    <el-menu class="content">
      <el-menu-item v-for="(item, i) in serverMenu" :key="i">
        {{ item }}
      </el-menu-item>
    </el-menu>
  </div>

  <div class="serverCards">
    <div style="margin: 25px">
      <div class="top">
        <div style="text-align: center">
          <br />
          <br />
          <h3>在Discord找到自己的社区</h3>
          <p>从游戏、音乐到教育,总有你的一片天地</p>
          <el-input
            style="width: 46%"
            v-model="searchInput"
            placeholder="搜索社区"
          />
        </div>
      </div>
      <h3>特色社区</h3>
      <div>
        <el-card
          :body-style="{ padding: '0px' }"
          class="card"
          v-for="(item, i) in serverCards"
          :key="i"
        >
          <img src="../assets/3.png" class="card_img" />
          <div class="text">{{ item.name }}</div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
.el-menu-item {
  border-radius: 5px;
}
.top {
  height: 295px;
  background-image: url("../assets/login_bg.png");
  border-radius: 9px;
}
.text {
  color: #333;
  width: 102px;
  font-size: 13px;
  margin-bottom: 6px;
  text-align: left;
}
.card_img {
  width: 100%;
  height: 172px;
  display: block;
}
.card {
  width: 285px;
  height: 315px;
  margin: 10px;
  float: left;
  background-color: #393939;
  border: 0;
  border-radius: 9px;
}
.content {
  position: fixed;
  left: 70px;
  width: 235px;
  bottom: 50px;
  top: 0px;
  background-color: #353535;
}
.serverCards {
  position: fixed;
  overflow-y: scroll;
  left: 305px;
  right: 0;
  height: 100%;
  top: 0;
  background-color: #454545;
}
::-webkit-scrollbar {
  display: none;
}
</style>

<script>
import { ref } from "vue";
export default {
  name: "GuildDiscovery",
  setup() {
    const serverMenu = [
      "发现",
      "主页",
      "游戏",
      "音乐",
      "教育",
      "科学&技术",
      "娱乐",
      "Student Hub",
    ];
    const serverCards = ref([
      { name: "Genshin Impact", cover: "", profile: "" },
      { name: "VALORANT", cover: "", profile: "" },
      { name: "Snowsgiving", cover: "", profile: "" },
      { name: "Anime Soul Discord", cover: "", profile: "" },
      { name: "Roblox", cover: "", profile: "" },
      { name: "Apex Legends", cover: "", profile: "" },
      { name: "Rocket League", cover: "", profile: "" },
      { name: "Destiny 2 LFG", cover: "", profile: "" },
    ]);

    const searchInput = ref("");

    return {
      serverMenu,
      serverCards,
      searchInput,
    };
  },
};
</script>
